<template>
  <div class="search">
    <van-row class="main">
      <van-col span="3" class="left" @click="$router.back()">
        <van-icon name="arrow-left" size="24px"></van-icon>
      </van-col>
      <van-col span="18" style="padding: 5px">
        <van-search style="border: 1px solid #313236;border-radius: 15px;height: 40px" v-model="value"
                    :placeholder="placeholder" shape="round"
                    background="#f8f9fd" @input="onInput" :autofocus="true" @search="onSearch"/>
      </van-col>
      <van-col span="3" class="left" @click="onSearch">
        搜索
      </van-col>
    </van-row>
    <div v-if="flag">
      <!--  顶部标签栏  -->
      <van-row style="text-align: center;margin-top: 20px">
        <van-col span="6" @click="$router.push('artistList')">
          <van-icon class-prefix="iconfont" name="geshou" color="#fa3a38"></van-icon>
          <span>歌手</span>
        </van-col>
        <van-col span="6">
          <van-icon class-prefix="iconfont" name="jiuba_iconlepu--" color="#fa3a38"></van-icon>
          <span>曲风</span>
        </van-col>
        <van-col span="6">
          <van-icon class-prefix="iconfont" name="peixunzhuanqu" color="#fa3a38"></van-icon>
          <span>专区</span>
        </van-col>
        <van-col span="6">
          <van-icon class-prefix="iconfont" name="tinggeshiqu1" color="#fa3a38"></van-icon>
          <span>识曲</span>
        </van-col>
      </van-row>
      <!--  搜索历史  -->
      <div class="guessLike" style="background-color:#f8f9fd;">
        <van-cell title="搜索历史">
          <template #right-icon>
            <van-icon name="delete-o" size="20px" @click="delSearchHistory"/>
          </template>
        </van-cell>
        <div class="guessList">
          <div v-for="(item,index) in searchHistory" :key="index" class="hotlist">
            <div>
              {{ item }}
            </div>
          </div>
        </div>
      </div>
      <!--  猜你喜欢  -->
      <div class="guessLike" style="background-color:#f8f9fd;margin-top: 50px">
        <van-cell title="猜你喜欢">
          <template #right-icon>
            <van-icon name="replay" size="20px" @click="hotSearch"/>
          </template>
        </van-cell>
        <div class="guessList">
          <div v-for="(item,index) in searchHot" :key="index" class="hotlist">
            <div>
              {{ item.searchWord }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-else class="searchSuggestions">
      <div v-for="(item,index) in searchSuggestions" :key="index" class="searchList">
        <div class="list">
          <van-cell :title="item.keyword" icon="search" @click="onSearch(item.keyword)">
            <van-divider></van-divider>
          </van-cell>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getSearchHot, getSearchSuggest, getSearchMultimatch, gerSearchDefault} from '../../api/search'
import {set} from "vue";
import router from "../../router";

export default {
  name: "index",
  data() {
    return {
      value: "",
      searchHot: [],
      searchHistory: {},
      flag: true,
      searchDefault: [],
      searchSuggestions: {},
      placeholder: '请输入搜索关键词',
      searchdefault: []
    }
  },
  mounted() {
    this.hotSearch()
    //  取出历史记录
    if (localStorage.getItem("searchHistory")) {
      this.searchHistory = JSON.parse(localStorage.getItem("searchHistory"))
    }
    // 对搜索建议进行随机遍历
    this.searchdefault = setInterval(this.gerSearchDefault, 5000)
    // this.gerSearchDefault()
  },
  destroyed() {
    // clearInterval(searchdefault)
  },
  methods: {
    router() {
      return router
    },
    // 进行搜索
    onSearch(keyword) {
      // 存储历史搜索记录
      let val = keyword.trim()
      if (this.searchHistory.length > 0) { //先对搜索历史进行判断
        if (this.searchHistory.indexOf(val) !== -1) {//判断是否有重复的，先删除再添加
          this.searchHistory.splice(this.searchHistory.indexOf(val), 1)
          this.searchHistory.unshift(val)
        } else {
          this.searchHistory.unshift(val)
        }
      } else {
        this.searchHistory.unshift(val)
      }
      if (this.searchHistory.length > 6) { //保留6个值
        this.searchHistory.pop()
      }
      localStorage.setItem("searchHistory", JSON.stringify(this.searchHistory))

      // 搜索多重匹配
      getSearchMultimatch(keyword).then(res => {
        console.log(res)
      })

    },
    // 热门搜索
    hotSearch() {
      this.searchHot = []
      getSearchHot().then(res => {
        if (res.status === 200) {
          let data = res.data.data
          while (this.searchHot.length < 4) {
            this.searchHot.unshift(data[Math.floor(Math.random() * 10)])
            this.searchHot = [...new Set(this.searchHot)]
          }
          this.searchDefault = res.data.data
        }
      })
    },
    // 清空搜索历史
    delSearchHistory() {
      this.searchHistory = []
      localStorage.setItem("searchHistory", JSON.stringify(''))
    },
    // 进行搜索建议
    onInput(val) {
      this.flag = false
      getSearchSuggest(val).then(res => {
        this.searchSuggestions = res.data.result.allMatch
        console.log(this.searchSuggestions)
      })
      // 为0时返回原来的界面
      if (val.length === 0) {
        this.flag = true
      }
    },
    //  搜索关键词
    gerSearchDefault() {
      this.placeholder = this.searchDefault[Math.floor(Math.random() * (18 + 1))].searchWord
    }
  }
}
</script>

<style scoped lang="scss">
.van-cell {
  background-color: #f8f9fd;
  padding: 0 10px;
}

.search {
  background-color: #f8f9fd;

  .searchSuggestions {
    margin-top: 10px;

    .searchList {
      margin-top: 5px;
    }
  }

  .search-icon {
    font-size: 16px;
    line-height: inherit;
  }

  .left {
    margin-top: 14px;
    text-align: center;
  }

  /*猜你喜欢*/
  .guessLike {
    margin-top: 15px;
    font-size: 18px;
    font-weight: 800;
    background: #f8f9fd;

    .guessList {
      font-weight: normal;
      font-size: 13px;
      display: flex;
      margin: 10px 0;

      .hotlist {
        margin: 0 5px;
        padding: 5px;
        border-radius: 15px;
        background: #ffffff;
        line-height: 13px;
      }
    }
  }
}


</style>
